<template>
  <div class="font-con">
    <div class="main-con">
      <div class="title animate__animated animate__fadeInDown">
        {{ info.title }}
      </div>
      <div
        class="sub-title animate__animated animate__fadeInDown animate__delay-1s"
      >
        {{ info.subTitle }}
      </div>
      <div class="image-con">
        <div
          class="image-item img1 animate__animated animate__fadeInUp animate__delay-2s"
        ></div>
        <div
          class="image-item img2 animate__animated animate__fadeInUp animate__delay-2s"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Font",
  computed: {
    config() {
      return this.$store.getters.curConfig;
    },
    info() {
      return this.config && this.config.info2 ? this.config.info2 : {};
    },
  },
};
</script>

<style lang="scss" scoped>
.font-con {
  width: 100%;
  height: 100%;
  text-align: center;
  .main-con {
    width: 100%;
    height: 100%;

    color: white;
    .title {
      font-size: 3rem;
      padding: 1.5rem;
      padding-top: 5rem;
      font-weight: bold;
    }
    .sub-title {
      font-size: 1.5rem;
      padding: 1rem 0;
    }
    .image-con {
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      .image-item {
        height: 30rem;
        flex: 1;
        margin: 0 2rem;
      }
      .image-item.img1 {
        max-width: 40rem;
        background: url(~@/assets/images/123.jpg) no-repeat;
        background-size: 100% 100%;
      }
      .image-item.img2 {
        max-width: 40rem;
        background: url(~@/assets/images/font.jpg) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
